<template>
    <div id="app">
        <ul>
            <li v-for="(v,i) in arr" :key="i">{{i}}-{{v}}</li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const arr = ref([55, 66, 77, 88]);
// import { onMounted, ref, watch } from "@vue/runtime-core";

// const container = ref();

// const input = ref('龙岩学院');
// const onEnter = (v) => {
//     updataMap()
// }

// const btn = () => {
//     updataMap()
// }

// onMounted(() => {
//     updataMap()
// })
// const lng = ref(0);
// const lat = ref(0);

// const updataMap = () => {
//     var map = new AMap.Map("container", {
//         resizeEnable: true
//     });
//     AMap.plugin(["AMap.PlaceSearch"], function () {
//         var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
//             // zoom: 1,//级别
//             pageSize: 5, // 单页显示结果条数
//             pageIndex: 1, // 页码
//             city: "010", // 兴趣点城市
//             citylimit: false,  //是否强制限制在设置的城市内搜索
//             map: map, // 展现结果的地图实例
//             panel: "panel", // 结果列表将在此容器中进行展示。
//             autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
//         });
//         //关键字查询
//         placeSearch.search(input.value)
//     });
//     map.on('click', function (e) {
//         lng.value = e.lnglat.getLng()
//         lat.value = e.lnglat.getLat()
//     });
// }
</script>

<style lang="less" scoped>
#map {
    overflow: hidden;
    display: flex;
    margin-top: 20px;
    border-radius: 10px;

    #container {
        position: relative;
        // margin-top: 133px !important;
        // margin-left: 20vw;
        width: 70%;
        height: 400px;
    }

    #panel {
        // margin-top: 133px !important;
        // position: absolute;
        background-color: rgb(248, 249, 250);
        // background-image: linear-gradient(to left top, white, gray);
        max-height: 90%;
        overflow-y: auto;
        // top: 0;
        // right: 40px;
        margin: auto;
        height: 400px;
        width: 30%;
    }
}
</style>